<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入jq -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn">获取数据</button>
    </body>
    <script>
        btn.onclick = function () {
            new Promise((resolve, reject) => {
                $.ajax({
                    url: ' https://liu.zzgoodqc.cn/promise1',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            let html = `<p>promise1：${res.msg}</p>`
                            $('#box').html(html)
                            resolve(res.data)
                        }
                    },
                })
            }).then((data) => {
                new Promise((resolve, reject) => {
                    $.ajax({
                        url: ' https://liu.zzgoodqc.cn' + data.url,
                        type: 'post',
                        dataType: 'json',
                        success: function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                $('#box').append(
                                    `<p>${data.url}: ` + res.msg + '</p>'
                                )
                                resolve(res.data)
                            }
                        },
                    })
                }).then((data) => {
                    new Promise((resolve, reject) => {
                        $.ajax({
                            url: ' https://liu.zzgoodqc.cn' + data.url,
                            type: 'get',
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    let html = `<p>promise3：${res.msg}</p>`
                                    $('#box').append(html)
                                    resolve(res.data)
                                }
                            },
                        })
                    })
                })
            })
        }
        // console.log(1)
        // //作用：用来处理异步操作的 例如ajax请求 定时器
        // // 当你发生一个异步操作的代码时 需要等待这个异步操作执行完毕后才会执行后面的代码

        // let res = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         console.log(2)
        //         // resolve('8888') //返回成功的结果
        //         reject('你发生错误了') //返回错误的结果
        //     }, 1000)
        // })
        // res.then((res) => {
        //     //成功的回调
        //     console.log(res)
        //     return 666
        // })
        //     .then((res) => {
        //         //上一步成功的回调的返回值
        //         console.log(res) //666
        //     })
        //     .then((res) => {
        //         console.log(res) //666
        //     })
        //     .catch((err) => {
        //         //捕获错误
        //         console.log(err)
        //         return 777
        //     })
        //     .then((res) => {
        //         //无论成功还是失败都会执行
        //         //重新执行一次试试
        //         console.log(res)
        //     })

        //获取用户订单功能
        // 1.用户访问到咱们网站 进入之后不需要就可以浏览的
        // 2.点击用户中心 进入用户中心页面 会判断你需要登录 就去登录
        // 3.登录成功之后 会跳转到用户中心页面
        // 先去发生登录的ajax请求----》结果之后 再去发送用户中心ajax的请求，
        // 点击订单列表(只有你访问用户中心成功之后才会展示)
    </script>
</html>
